import React, {useState} from 'react';
import {View, TextInput, StyleSheet, KeyboardAvoidingView, Platform} from 'react-native';
import {SafeAreaView, useSafeAreaInsets} from 'react-native-safe-area-context';
import ChatContent from './ChatContent';
import ChatNavigation from './Navigation';
import {Button, Text} from 'native-base';

const ChatPage = () => {
  const insets = useSafeAreaInsets();
  const [messages, setMessages] = useState([
    {sender: 'User1', name: 'Tom', content: 'Hello!', avatar: 'https://alifei02.cfp.cn/creative/vcg/800/new/VCG211226637716.jpg'},
    {sender: 'User2', name: 'Jerry', content: 'Hi, how are you?', avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg'},
  ]);
  const [newMessage, setNewMessage] = useState('');

  const handleSend = () => {
    setMessages([...messages, {sender: 'User2', name: 'Jerry', content: newMessage, avatar: 'https://tenfei05.cfp.cn/creative/vcg/800/new/VCG211458140803.jpg'}]);
    setNewMessage('');
  };
  return (
    <SafeAreaView style={{flex: 1, backgroundColor: 'white', paddingTop: insets.top}} edges={['left', 'right']}>
      <ChatNavigation title="小Ling" showMore={false} />
      <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.container}>
        <ChatContent messages={messages} />
        <View style={styles.inputContainer}>
          <TextInput style={styles.input} multiline={true} value={newMessage} onChangeText={setNewMessage} placeholder="Type a message" />
          <Button bg="#0084ff" onPress={handleSend}>
            <Text bold color="white">
              Send
            </Text>
          </Button>
        </View>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inputContainer: {
    flexDirection: 'row',
    padding: 10,
    justifyContent: 'center',
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 5,
    padding: 10,
    marginRight: 10,
  },
});
export default ChatPage;
